import { useState, useEffect, useContext } from 'react';
import { NavBar, List, Tag } from "antd-mobile";
import { useHistory } from "react-router-dom";

import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function() {
  const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);
  const [list, setList] = useState([]);
  // const [newGroupName, setNewGroupName] = useState('');

  // const handleChangeGroupName = (value: string) => {
  //   setNewGroupName(value);
  // }

  useEffect(async () => {
    const res = await mySdkStore.sdk.queryConversationGroups();
    setList(res);
  }, []);

  // 构建onClick事件函数
  const createOnClick = (item) => {
    if ([4, '4'].includes(item.type)) {
      // 点击“免打扰分组”链接到设置页面
      return () => history.push({ pathname: `/conversationGroupManageSwitch` });
    } else if (item.todo === '自定义') {
      // 点击自定义分组链接到“选择/移除会话”页面
      return () => history.push({ pathname: `/conversationGroupEdit/${item.id}/${item.groupName}` });
    }
    return null;
  }

  return (<div className="chatGroupManagePage">
      <NavBar onBack={() => history.goBack()} style={{ background: '#fff', border: 'none' }}>分组管理</NavBar>
      <List>
        {list.map((item) => {
          const onClickFn = createOnClick(item);
          return <List.Item
            key={item.id}
            onClick={onClickFn}
          >
            {item.groupName} { false && <Tag style={{ '--text-color': '#666', '--border-color': '#d1d1d1' }} fill='outline'>自定义</Tag>}
          </List.Item>
        })}
      </List>
      {/* <div className='btnArea'>
        <Button style={{ width: '100%'}} onClick={() => Dialog.show({
          title: '新建分组',
          content: <Input placeholder='请输入分组名' onChange={(value) => handleChangeGroupName(value)} />,
          closeOnAction: true,
          actions: [[
            {
              key: 'cancel',
              text: '取消',
            },
            {
              key: 'ok',
              text: '确认',
            },
          ]],
        })}>添加新分组</Button>
      </div> */}
    </div>
  )
}
